<template>
  <!-- 图文形式 -->
  <div>
    <!-- 搜索框开始 -->
    <el-row :gutter="20">
      <el-col
        :span="12"
        :offset="6"
      ><div class="grid-content bg-purple">
        <el-input v-model="storename" placeholder="请输入内容" @change="getstorename">
          <el-button slot="suffix" type="primary" @click="getstorename">搜索</el-button>
        </el-input>
      </div></el-col>
      <div class="gjss" @click="gjss">>>高级搜索</div>
    </el-row>
    <!-- 搜索框结束 -->
    <el-divider />
    <!-- 类目开始 -->
    <div class="leimu">
      <span class="ssleimu">所属类目：</span>
      <el-radio-group v-model="radio1" @change="classification">
        <el-radio-button label="全部" />
        <el-radio-button v-for="item in tableData4" :key="item.id" :label="item.storetype" />
      </el-radio-group>
    </div>
    <!-- 类目结束 -->
    <el-row>
      <el-col v-for="item in tableData" :key="item.id" :span="6">
        <el-card class="leirong" :body-style="{ padding: '0px' }">
          <img :src="item.goodsimage" class="image" @click="switchs(item.id);">
          <!-- ;getShoplist2(item.id) -->
          <div class="xinxi">
            <h4 class="nr bt">{{ item.storename }}</h4>
            <p class="nr xix">{{ item.storeblone }}</p>
            <div class="bottom clearfix">
              <span class="danj">单价 {{ item.unitprice }}</span>
              <el-button type="text" class="button" @click="posthoplist(item)">{{ item.state }}</el-button>
              <el-button type="text" class="button" @click="theeditor(item.id)">编辑</el-button>
              <el-button type="text" class="button" @click="deletetel(item.id)">删除</el-button>
              <el-button type="text" class="button" @click="switchs(item.id)">详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 商品详情 -->
    <el-drawer
      title="商品详情"
      :visible.sync="drawer"
      :direction="fangxiang"
      destroy-on-close
      size="660px"
    >
      <goods-details :obtainid="tableData2" />
      <!-- :details="tableData2" -->
    </el-drawer>
    <!-- 编辑 -->
    <edit-component :appear.sync="appear2" :form.sync="tableData2" />
  </div>
</template>

<script>
// 导入请求方法
import { getShoplist1, getShoplist3, getShoplist4, getShoplist6, getShoplist7, getShoplist8, getShoplist9 } from '@/api/getShoplist';
// 导入商品详情组件
import GoodsDetails from './goodsdetails';
// 导入商品详情组件
import EditComponent from './editcomponent';
export default {
  name: 'GraphicForm',
  components: {
    GoodsDetails,
    EditComponent,
  },
  data() {
    return {
      radio1: '全部', // 所属类目
      drawer: false, // 抽屉显示与隐藏value
      appear2: false, // 编辑显示与隐藏
      fangxiang: 'rtl', // 抽屉弹出方向
      storename: '', // 搜索框（搜索商品名
      tableData: '', // 数据
      tableData2: {}, // 当前点击页数据
      tableData4: '',
    };
  },
  created() {
    this.getShoplist();
    this.getclassification();
  },
  methods: {
    // 请求数据渲染列表
    async getShoplist() {
      // 请求商品数据
      const data = await getShoplist1();
      // console.log(data);
      this.tableData = data.data;
      // console.log(this.tableData);
    },
    async getclassification() {
      // 请求分类列表数据
      const datas = await getShoplist4();
      this.tableData4 = datas.data;
      // console.log(this.tableData4);
    },
    // 显示商品详情
    async switchs(id) {
      // 请求数据
      const { data } = await getShoplist3(id);
      // console.log(data);
      // 将得到的数据赋值给tableData2
      this.tableData2 = data;
      console.log(this.tableData2);
      // 显示右侧抽屉组件
      this.drawer = true;
    },
    // 编辑按钮点击事件
    async theeditor(id) {
      const { data } = await getShoplist3(id);
      this.tableData2 = data;
      console.log(this.tableData2);
      this.appear2 = true;
    },
    // 按分类请求数据
    async classification() {
      if (this.radio1 === '全部') {
        this.getShoplist();
      } else {
      // 请求数据
        const { data } = await getShoplist6(this.radio1);
        // console.log(data);
        // 将得到的数据赋值给tableData2
        this.tableData = data;
        // console.log(this.tableData);
      }
    },
    // 按商品名查询数据
    async getstorename() {
      // 请求数据
      if (this.storename === '') {
        this.getShoplist();
      } else {
        const { data } = await getShoplist7(this.storename);
        // console.log(data);
        // 将得到的数据赋值给tableData2
        this.tableData = data;
        // console.log(this.tableData);
      }
    },
    // 商品详情关闭前的回调
    async handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    // 请求改商品状态
    async posthoplist(data) {
      // 对数据进行判断
      if (data.state === '上架') {
        data.state = '下架';
        // 发起请求更改数据
        await getShoplist8(data);
        // 重新获取新数据
        this.getShoplist();
        this.promptdown();
      } else {
        data.state = '上架';
        // 发起请求更改数据
        await getShoplist8(data);
        // 重新获取新数据
        this.getShoplist();
        this.promptup();
      }
    },
    // 上架提示
    async promptup() {
      this.$message({
        message: '上架成功！',
        type: 'success',
      });
    },
    // 下架提示
    async promptdown() {
      this.$message({
        message: '下架成功！',
        type: 'success',
      });
    },
    async gjss() {
      this.$notify({
        title: '施工中。。。',
        message: '莫挨老子，功能正在开发中，敬请期待!',
        type: 'warning',
      });
    },
    // 删除商品
    async deletetel(id) {
      const data = await getShoplist9(id);
      console.log(data);
      this.getShoplist();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__header{
  padding: 0px;
  font-size: 30px;
  color: #000000;
  border: #8d8d8d solid 0px;
}
.scroll{
  overflow-y: auto;
}

// ::v-deep .el-drawer__body{
  // overflow: auto;
// }
::v-deep .el-radio-button__inner{
  border: 0px;
}
::v-deep .el-radio-button__inner{
  border-left-width: 0px
}
.el-button{
  transform: translate(5px,0px);
}
.gjss{
  color: #339DFF;
  margin-top: 15px;
}
::v-deep .el-radio-button:first-child{
  .el-radio-button__inner{
    border-left:0
  }
}

.leirong{
  width: 265px;
  width: 265px;
  height: 280px;
  padding: 0px;
  margin: 10px;
  .image{
    width: 100%;
    height: 160px;
  }
  .xinxi{
    .bt{
      font-size: 18px;
    }
    .nr{
      margin: 2px;

    }
    .xix {
      font-size: 14px;
      color: #929292;
    }
    .danj{
      font-size: 12px;
      color: #D8D8D8;
    }
  }
}
</style>
